<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        /* #app{}
        [id="app"]{} */

        /* 属性选择器 */
        /* [属性名="属性值"]{

        } */

        /* 如果元素中存在v-cloak 属性 默认隐藏., 等Vue实例准备完毕, 自定删除该属性 */

        p {
            height: 40px;
            line-height: 40px;
            /* border: 1px dashed #333; */
        }

        .wrap{
            width: 200px;
            height: 200px;
            background-color: gray;
            overflow: hidden;
        }
        .sub {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- <h2>事件修饰符 .stop</h2> -->
        <!-- 事件传播机制(事件冒泡和阻止事件冒泡) -->
        <!-- <div class="wrap" @click="wrapHandler">
            <div class="sub" @click.stop="subHandler"></div>
        </div>
        <hr> -->

        <!-- <h2>事件修饰符 .capture</h2>
        <div class="wrap" @click.capture="wrapHandler">
            <div class="sub" @click.capture="subHandler"></div>
        </div>
        <hr> -->

        <!-- 给父元素绑定事件 默认情况下 点击子元素也可触发 .self修饰符可以限制 能触发事件的元素只有其本身 -->
        <!-- <h2>事件修饰符 .self</h2>
        <div class="wrap" @click.self="wrapHandler">
            <div class="sub" ></div>
        </div>
        <hr> -->


        <div>
            <!-- <h2>事件修饰符 .prevent</h2> -->
            <!-- 阻止表单默认提交 
                @submit="(e)=>e.preventDefault()" 
                @submit.prevent  
            -->
            <!-- <form action="" @submit.prevent>
                <p>
                    <label for="">用户名</label>
                    <input type="text" name="user">
                </p>
                <p>
                    <label for="">密&emsp;码</label>
                    <input type="text" name="pwd">
                </p>
                <p><input type="submit" value="提交"></p>
            </form> -->


            <!-- <a href="" @click.prevent>刷新</a>
            <a href="https://www.baidu.com" @click.prevent>跳转</a> -->
        </div>


        <!-- <h2>事件修饰符 .once</h2>
        <div class="wrap" @click.once="wrapHandler">
            <div class="sub" ></div>
        </div> -->
    </div>
</body>
<script>

    /* 

     v-指令名称:参数.修饰符 = "指令值"
        1. 修饰符是由点开头的指令后缀来表示的。
        2. 修饰符可以有多个  


    事件修饰符:(事件触发时相关数据)
        .stop      阻止事件冒泡
        .capture   以事件捕获方式触发事件 
        .self      只有元素本身可以触发事件 (e.target === this)
        .prevent   阻止浏览器默认行为
        .once      事件只触发一次
        .passive   修饰符尤其能够提升移动端的性能。

    
    */


   

    // v-once
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "hello world",
            count: 100,
        },
        methods: {
            wrapHandler:function(){
                console.log("wrap被点击");
            },
            subHandler:function(){
                console.log("sub被点击");
            }
        }
    })


</script>


</html>